let mixObject = {
    methods: {
        handleClose() {
            // 触发input事件，父组件可以使用v-model获取值
            this.$emit("input",false);
        }
    }
}

Vue.component("insert",{
    template: '#insert',
    mixins: [mixObject],
    props: {
        value: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            formData: {
                sex: "1"
            }
        }
    },
    methods: {
        // 增加操作
        handleInsert() {
            this.$emit("inserted",this.formData);
            this.handleClear();
        },
        handleClear() {
            this.formData = {
                sex: 1
            }
        }
    }
});

Vue.component("update",{
    template: '#update',
    mixins: [mixObject],
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        rowData: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            formData: {
                sex: "1"
            }
        }
    },
    // 侦听的高级用法：
    watch: {
        rowData: {
            // immediate：是否立刻侦听（默认false），默认情况下，第一次传入数据不侦听。改为true，第一次传值就会侦听
            immediate: true,
            // deep: true, // 深度侦听，默认false，如果侦听的数据是对象，对象的属性发生变化时，侦听函数也响应
            // 侦听的方法
            handler(newVal) {
                // console.log("newVal = ",newVal);
                this.formData = {...newVal};
                // console.log("this.formData = ",this.formData);
            }
        } 
    },
    methods: {
        // 修改操作
        handleUpdate() {
            this.$emit("updated",this.formData);
            this.$emit("input",false);
        },
        // 重置表单
        handleReset() {
            this.formData = {...this.rowData};
        }
    }
})

Vue.component("list",{
    template: '#list', 
    data() {
        let id = 0;
        const tableList = [];
        // 从本地缓存中加载数据
        let jsonStr = localStorage.getItem("tableList");
        if (jsonStr) {
            tableList.push(...JSON.parse(jsonStr));
        }
        tableList.forEach(v => {
            if (v.id > id) {
                id = v.id;
            }
        });
        id ++;

        return {
            showObject: {
                insert: false,
                update: false,
            },
            useObject: {
                insert: false,
                update: false,
            },
            tableList,
            rowData: null,
            id,
        }
    },
    methods: {
        // 打开组件，rowData:如果传了该参数，会将this.rowData赋值为该参数
        handleShow(key,rowData) {
            // console.log("key = ",key,",rowData = ",rowData);
            if (rowData) {
                this.rowData = rowData;
            }
            if (key && !this.useObject[key]) {
                this.useObject[key] = true;
            }
            let keys = Object.keys(this.showObject);
            keys.forEach(v => this.showObject[v] = v === key);

        },
        // 增加页面，增加成功之后，传入过来的数据
        handleInserted(data) {
            data.id = this.id ++;
            this.tableList.push(data);
        },
        handleUpdated(data) {
            let row = this.tableList.find(v => v.id == data.id);
            Object.assign(row,data);
        },
        handleDelete(id) {
            let index = this.tableList.findIndex(v => v.id == id);
            this.tableList.splice(index,1);
        },
        handleSave() {
            let jsonStr = JSON.stringify(this.tableList);
            localStorage.setItem("tableList",jsonStr);
        }
    }
});